<script lang="ts" setup>
defineOptions({ name: 'CellRowStyle' });

import { ref, onBeforeMount } from "vue";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import { AgGridVue } from "ag-grid-vue3";

const ragCellClassRules = {
    "rag-green": (params) => params.value === true,
};

const columnDefs = ref([
    { field: "make", checkboxSelection: true },
    { field: "model" },
    { field: "price", filter: "agNumberColumnFilter" },
    { field: "electric", cellClassRules: ragCellClassRules }, // 给electric列应用上单元格样式规则
]);
const gridApi = ref();
const defaultColDef = ref({
    filter: "agTextColumnFilter",
    floatingFilter: true,
    flex: 1,
});
const rowData = ref();
const rowClassRules = ref();
const rowSelection = ref();

onBeforeMount(() => {
    rowData.value = [
        { make: "Tesla", model: "Model Y", price: 64950, electric: true },
        { make: "Ford", model: "F-Series", price: 33850, electric: false },
        { make: "Toyota", model: "Corolla", price: 29600, electric: false },
        { make: "Mercedes", model: "EQA", price: 48890, electric: true },
        { make: "Fiat", model: "500", price: 15774, electric: false },
        { make: "Nissan", model: "Juke", price: 20675, electric: false },
        { make: "Vauxhall", model: "Corsa", price: 18460, electric: false },
        { make: "Volvo", model: "EX30", price: 33795, electric: true },
        { make: "Mercedes", model: "Maybach", price: 175720, electric: false },
        { make: "Vauxhall", model: "Astra", price: 25795, electric: false },
        { make: "Fiat", model: "Panda", price: 13724, electric: false },
        { make: "Jaguar", model: "I-PACE", price: 69425, electric: true },
    ];
    rowClassRules.value = {
        // make值为Ford时加上行样式
        "rag-red": (params) => params.data.make === "Ford",
    };
    rowSelection.value = "multiple";
});


const onGridReady = (params) => {
    gridApi.value = params.api;
};
</script>

<template>
    <div style="width: 100%;height: 500px">
        <ag-grid-vue style="width: 100%; height: 100%;" class="ag-theme-quartz" :columnDefs="columnDefs"
            @grid-ready="onGridReady" :rowData="rowData" :defaultColDef="defaultColDef" :rowClassRules="rowClassRules"
            :rowSelection="rowSelection"></ag-grid-vue>
    </div>
</template>

<style>
.rag-red {
    background-color: #CC222244;
}

.rag-green {
    background-color: #33CC3344;
}
</style>